drag images
revision:
1 - smooth drag with pure JavaScript
<div class="frame">
<img src="../images/1.jpg" alt="drag-and-drop image script" title="drag-and-drop image script"
class="dragme" >
</div>
<style>
.frame{width: 45vw; height: 45vw; border: 0.2vw solid grey; z-index: 10}
.dragme{position:relative; width: 20vw; height: 16vw; cursor: move;}
</style>
<script>
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
if(e.preventDefault) e.preventDefault();
// IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if (targ.className != 'dragme') {return};
// calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;
// assign default values for top and left properties
if(!targ.style.left) { targ.style.left='5px'};
if(!targ.style.top) { targ.style.top='5px'};
// calculate integer values for top and left properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove=dragDiv;
return false;
}
function dragDiv(e) {
if (!drag) {return};
if (!e) { var e= window.event};
var targ=e.target?e.target:e.srcElement;
// move div element
targ.style.left=coordX+e.clientX-offsetX+'px';
targ.style.top=coordY+e.clientY-offsetY+'px';
return false;
}
function stopDrag() {
drag=false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
</script>
2 - draggable img element
code:
<div class="grid_A">
<div class="frame-1">
<div id="mydiv">
<div id="mydivheader">
<p>move this picture</p>
<img id="img-1" src="../images/2.jpg" alt="">
</div>
</div>
</div>
<style>
.frame-1{width: 45vw; height: 45vw; border: 0.2vw solid grey; z-index: 10;
border: 0.2vw solid blue;}
#mydiv {position: absolute; z-index: 9; background-color: #f1f1f1;
border: 0.4vw solid #d3d3d3; text-align: center; }
#mydivheader {background-color: pink; height: 2vw; padding: -1vw;}
#mydivheader p{color: blue;}
#img-1{position:relative; width: 20vw; height: 16vw; cursor: move;}
</style>
<script>
// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
3 - draggable img element
code:
<div class="frame-2">
<img id="dragme_1" class="draggable" src="../images/6.jpg" alt="sailing"
width="30%" height="auto">
</div>
<style>
.frame-2{width: 45vw; height: 45vw; border: 0.2vw solid grey; z-index: 10;
border: 0.2vw solid blue;}
.draggable {cursor: move; position: absolute; -webkit-user-select: none;
user-select: none; color: red; align-items: center; display: flex;
justify-content: center; border: 0.2vw solid blue; }
</style>
<script>
let x = 0, y = 0;
const ele = document.getElementById('dragme_1');
const mouseDownHandler = function (e) {
x = e.clientX;
y = e.clientY;
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
const dy = e.clientY - y;
ele.style.top = `${ele.offsetTop + dy}px`;
ele.style.left = `${ele.offsetLeft + dx}px`;
x = e.clientX;
y = e.clientY;
};
const mouseUpHandler = function () {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
ele.addEventListener('mousedown', mouseDownHandler);
</script>
4 - draggable element with picture
code:
<div class="grid_A">
<div class="frame-3">
<img class="draggable-1" id="dragme_2"src="../images/4.jpg" alt="" width="200" height="auto">
</div>
<style>
.frame-3{width: 45vw; height: 45vw; border: 0.2vw solid grey; z-index: 10; border: 0.2vw solid blue;}
.draggable-1 {cursor: move; position: absolute; -webkit-user-select: none; user-select: none; color: red; align-items: center; display: flex;
justify-content: center; border: 0.2vw solid greenyellow; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
let x = 0; let y = 0;
const ele = document.getElementById('dragme_2');
const mouseDownHandler = function (e) {
x = e.clientX;
y = e.clientY;
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
const dy = e.clientY - y;
ele.style.top = (ele.offsetTop + dy) + 'px';
ele.style.left = (ele.offsetLeft + dx) + 'px';
x = e.clientX;
y = e.clientY;
};
const mouseUpHandler = function () {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
ele.addEventListener('mousedown', mouseDownHandler);
});
</script>
5 - draggable enlargeable HTML img element
code:
<div class="frame-4">
<div id="zoom_1">
<img src="../images/17.jpg" alt="zoom">
</div>
</div>
<style>
.frame-4{width: 45vw; height: 45vw; border: 0.2vw solid grey; z-index: 10;
border: 0.2vw solid blue;}
#zoom_1 {width: 100%; height: 100%; transform-origin: 0px 0px; transform: scale(1)
translate(0px, 0px); cursor: grab; overflow: hidden;}
div#zoom_1 > img {width: 100%; height: 100%; }
</style>
<script>
var scale = 1, panning = false, pointX = 0, pointY = 0, start = { x: 0, y: 0 },
zoom = document.getElementById("zoom_1");
function setTransform() {
zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}
zoom.onmousedown = function (e) {
e.preventDefault();
start = { x: e.clientX - pointX, y: e.clientY - pointY };
panning = true;
}
zoom.onmouseup = function (e) {
e.preventDefault();
panning = false;
}
zoom.onmousemove = function (e) {
e.preventDefault();
if (!panning) {
return;
}
pointX = (e.clientX - start.x);
pointY = (e.clientY - start.y);
setTransform();
}
zoom.onwheel = function (e) {
e.preventDefault();
var xs = (e.clientX - pointX) / scale, ys = (e.clientY - pointY) / scale,
delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
(delta > 0) ? (scale *= 1.2) : (scale /= 1.2);
pointX = e.clientX - xs * scale;
pointY = e.clientY - ys * scale;
setTransform();
}
</script>
